<template>
    <div class="wrapper">
        <div class="header">
            <div class="header-title">
                <p>特色课</p>
                <van-icon @click="$router.push('/search')" size="26px" color="#999" name="search" />
            </div>

            <van-dropdown-menu>
                <!-- <van-dropdown-item title="分类" ref="item">
                    <div class="tmk">
                        <p>{{classifyData[0].name}}</p>
                        <div class="tmk-item">
                            <span :class="{bg:item.id == dynamic}" @click="pitch(item.id)"
                                v-for="(item,index) in classifyData[0].child" :key="index">{{item.name}}</span>
                        </div>
                        <p>{{classifyData[1].name}}</p>
                        <div class="tmk-item">
                            <span :class="{bg:item.id == dynamic2}" @click="pitch2(item.id)"
                                v-for="(item,index) in classifyData[1].child" :key="index">{{item.name}}</span>
                        </div>
                        <div class="tmk-btn">
                            <van-button size="large" type="default">重置</van-button>
                            <van-button size="large" @click="notarize" type="primary">确认</van-button>
                        </div>
                    </div>
                </van-dropdown-item> -->
                <van-dropdown-item title="排序" @change="sort" v-model="that.order_by" :options="that.option">
                </van-dropdown-item>
                <van-dropdown-item title="筛选" ref="eeee">
                    <div class="tmk">
                        <div class="tmk-item">
                            <span :class="{bg:index == dynamic}" @click="pitch(item.id)"
                                v-for="(item,index) in that.classifyData" :key="index">{{item.name}}</span>
                        </div>
                    </div>
                </van-dropdown-item>
            </van-dropdown-menu>
        </div>
        <div style="height:92px"></div>
        <div class="content-box">
            <van-list v-model="that.loading" offset="30" :finished="that.finished" finished-text="没有更多了"
                :error.sync="error" error-text="请求失败，点击重新加载" @load="onLoad">
                <div class="box" v-if="that.flag">
                    <div class="jp-box" v-for="(item,index) in that.listData" :key="index"
                        @click="courseDetailFn(item.id)">
                        <div class="jp-box-item1">{{item.title}}</div>
                        <div class="jp-box-item2">共点击量</div>
                        <div class="jp-box-item3">
                            <img :src="item.cover_img" alt />
                        </div>
                        <div class="jp-box-item4">
                            <p>{{item.id}}人已报名</p>
                            <span v-if="item.price == 0">0.00</span>
                            <div v-else>
                                <span>{{num(item.price)}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-else>暂无课程</div>
            </van-list>
        </div>
        <div style="height:72px"></div>
    </div>
</template>
  
<script setup>
import { getClassifyPort, getClassifyDatasPort, getListDataPort, getClassifyDataPort } from '@/api/course'
import { reactive, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
let router = useRouter()
let eeee = ref(null)
let that = reactive({
    loading: false,
    finished: false,
    error: false,
    classifyData: [{ name: '', child: '' }, { name: '', child: '' }],
    dynamic: 0,
    dynamic2: 0,
    value: 0,
    option: [
        { text: '综合排序', value: 0 },
        { text: '最新', value: 1 },
        { text: '最热', value: 2 },
        { text: '价格从低到高', value: 3 },
        { text: '价格从高到底', value: 4 }
    ],
    listData: [],
    page: 1,
    limit: 3,
    course_type: 0,
    classify_id: 0,
    order_by: 0,
    attr_val_id: [],
    is_vip: 0,
    flag: true
})
onMounted(() => {
    gettClassify()
    gettListData()
    getScroll()
})

// 获取分类类别
let gettClassify = async () => {
    let res = await getClassifyPort()
    if (res.code == 200) {
        that.classifyData = res.data.appCourseType
    }

}
// 筛选
let pitch = async (i) => {
    that.course_type = i
    let page = 1
    console.log('--------', eeee);
    eeee.value.toggle()
    let res = await getClassifyDatasPort({
        page,
        order_by: that.order_by,
        course_type: i,
        classify_id: that.classify_id
    })
    if (res.code == 200) {
        that.listData = res.data.list
    }
}
let pitch2 = (i) => {
    that.dynamic2 = i
}
// 分类点击确认
let notarize = async () => {
    that.page = 1
    // console.log(that.dynamic, that.dynamic2)
    // console.log(that.attr_val_id)
    let res = await getClassifyDataPort(
        that.page,
        that.limit,
        that.course_type,
        that.classify_id,
        that.order_by,
        [that.dynamic, that.dynamic2],
        that.is_vip
    )
    console.log(res)
    if (res.code == 200) {
        that.listData = res.data.list
    }
    if (res.data.list == '') {
        that.flag = false
    } else {
        that.flag = true
    }
    that.$refs.item.toggle()
}
// 点击排序获取数据
let sort = async () => {
    console.log(that.value)
    let page = 1
    let res = await getClassifyDatasPort({
        page,
        order_by: that.order_by,
        course_type: that.course_type,
        classify_id: that.classify_id
    })
    if (res.code == 200) {
        that.listData = res.data.list
    }
}
// 滚动底部触发事件
let onLoad = () => {
    that.page += 1
    that.loading = true
    // console.log(that.page)
    let num = 2
    // if (!that.listData == '') {
    gettListData(num)
    // }
}
//获取列表数据
let gettListData = async (num) => {
    let res = await getListDataPort(that.page, that.limit)
    console.log('-----', num);
    if (num) {
        if (res.data.list.length == 0) {
            that.finished = true
            return false
        } else if (res.code == 200) {
            that.listData = that.listData.concat(res.data.list)
            that.loading = false
        }

    } else if (res.code == 200) {
        that.listData = res.data.list
        that.loading = false
    }
}
let getScroll = () => {
    // let top = window.addEventListener('scroll', that.handleScroll)

    console.log(top)
}
// 获取分类页面数据
let gettClassifyData = async () => { }
// 点击跳转详情
let courseDetailFn = (iid) => {
    router.push(`/course-detail?id=${iid}`)
}

let num = (e) => {
    //价钱补零
    return parseFloat(e).toFixed(2)
}

</script>
  
<style lang="scss" scoped>
.wrapper {
    width: 100%;
    background: #f4f4f4;
    box-sizing: border-box;
}

.header {
    position: fixed;
    top: 0;
    width: 100vw;
    height: 88px;
    background: #fff;
    box-sizing: border-box;

    .header-title {
        font-size: 20px;
        text-align: center;
        position: relative;

        p {
            margin: 0;
            line-height: 44px;
        }

        .van-icon {
            position: absolute;
            top: 8px;
            right: 20px;
        }
    }
}

.tmk {
    margin: 10px;
    box-sizing: border-box;

    .tmk-item {
        width: 100%;
        display: flex;
        // justify-content: space-between;
        flex-wrap: wrap;
        border-bottom: 1px solid rgb(240, 238, 238);

        span {
            width: 99px;
            height: 47px;
            text-align: center;
            line-height: 47px;
            background: #f4f4f4;
            margin: 10px 23px;
        }
    }
}

.tmk-btn {
    width: 100%;
    height: 40px;
    padding: 10px 0;
    display: flex;
}

.bg {
    color: #eb6100;
    background: #e3e5fa;
}

.content-box {
    width: 100%;
}

.box {
    width: 100vw;
    box-sizing: border-box;
    padding: 0 10px 20px;
}

.jp-box {
    width: 95vw;
    height: 259px;
    display: flex;
    flex-direction: column;
    background: #fff;
    margin: 14px 0;
    padding: 0 10px;
    border-radius: 6px;

    .jp-box-item1 {
        font-size: 25px;
        // height: 47px;
        padding-top: 35px;
    }

    .jp-box-item2 {
        height: 50px;
        line-height: 50px;
        color: #999;
        font-size: 20px;
    }

    .jp-box-item3 {
        height: 65px;
        display: flex;
        align-items: center;
        color: #999;

        img {
            border-radius: 50%;
            width: 43px;
            height: 43px;
            margin-right: 15px;
        }
    }

    .jp-box-item4 {
        border-top: 1px solid rgb(243, 241, 241);
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        p {
            margin: 0;
            width: 290px;
            color: #999;
        }

        span {
            font-size: 20px;
            color: #eb6100;
            display: flex;
            align-items: center;
        }
    }
}
</style>
  